<style scoped>
.layout {
    background: #f5f7f9;
    position: relative;
    overflow: hidden;
}
.layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width 0.2s ease 0.2s;
}
.menu-item i {
    transform: translateX(0px);
    transition: font-size 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span {
    width: 0px;
    transition: width 0.2s ease;
}
.collapsed-menu i {
    transform: translateX(5px);
    transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
    vertical-align: middle;
    font-size: 22px;
}
.home-memu {
    height: 100vh;
}
.home-content {
    position: absolute;
    top: 52px;
    /* width: 100%; */
    right: 15px;
    bottom: 15px;
    left: 15px;
    border: none;
    border-radius: 0%;
    box-sizing: inherit;
}
</style>
<style src="../style/home-responsive.css" scoped></style>
<template>
    <div class="layout">
        <Layout>
            <Sider
                breakpoint="md"
                collapsible
                :collapsed-width="78"
                v-model="isCollapsed"
                class="home-memu"
            >
                <Menu
                    :active-name="activeName"
                    :open-names="openNames"
                    ref="p_menu"
                    theme="dark"
                    width="auto"
                    :accordion="true"
                    @on-open-change="parentChangeTag"
                    @on-select="childChangeTag"
                    :class="menuitemClasses"
                >
                    <MenuItem name="首页-0">
                        <Icon type="ios-home"></Icon>
                        <span>首页</span>
                    </MenuItem>
                    <sider-menu
                        v-for="menu in menuList"
                        :key="menu.menuId"
                        :menu="menu"
                        :dynamicMenuRoutes="dynamicMenuRoutes"
                    ></sider-menu>
                </Menu>
                <div slot="trigger"></div>
            </Sider>
            <Layout>
                <main-nav></main-nav>
                <Content :style="{padding: '0 16px 16px', position:'relative'}">
                    <Breadcrumb :style="{margin: '16px 0'}">
                        <BreadcrumbItem>当前位置</BreadcrumbItem>
                        <BreadcrumbItem v-for="(item,index) in mainLinks" :key="index">{{item}}</BreadcrumbItem>
                    </Breadcrumb>
                    <Card class="home-content">
                        <div>
                            <!-- <keep-alive> -->
                            <router-view :key="$route.fullPath"></router-view>
                            <!-- </keep-alive> -->
                        </div>
                    </Card>
                </Content>
                <!-- <Content :style="{margin: '20px', background: '#fff', minHeight: '220px'}">Content</Content> -->
            </Layout>
        </Layout>
    </div>
</template>
<script>
import MainNav from "./main-nav";
import SiderMenu from "./main-sider-menu";
export default {
    components: {
        SiderMenu,
        MainNav
    },
    data() {
        return {
            isCollapsed: false,
            mainLinks: [],
            ComponentName: "--",
            openNames: [],
            activeName: ""
        };
    },
    computed: {
        menuitemClasses: function() {
            return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
        },
        menuList: {
            get() {
                return this.$store.state.common.menuList;
            },
            set(val) {
                this.$store.commit("common/updateMenuList", val);
            }
        }
    },
    watch: {
        $route: "routeHandle"
    },
    created() {
        this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
        this.dynamicMenuRoutes = JSON.parse(
            sessionStorage.getItem("dynamicMenuRoutes") || "[]"
        );
        this.routeHandle(this.$route);
    },
    mounted() {
        //更新菜单
        this.watchRoute();
    },
    methods: {
        // 路由操作
        routeHandle(route) {
            if (route.meta.isTab) {
                // tab选中, 不存在先添加
                // var tab = this.mainTabs.filter(
                //     item => item.name === route.name
                // )[0];
                // if (!tab) {
                //     if (route.meta.isDynamic) {
                //         route = this.dynamicMenuRoutes.filter(
                //             item => item.name === route.name
                //         )[0];
                //         if (!route) {
                //             return console.error("未能找到可用标签页!");
                //         }
                //     }
                //     tab = {
                //         menuId: route.meta.menuId || route.name,
                //         name: route.name,
                //         title: route.meta.title,
                //         type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
                //         iframeUrl: route.meta.iframeUrl || "",
                //         params: route.params,
                //         query: route.query
                //     };
                //     this.mainTabs = this.mainTabs.concat(tab);
                // }
                // this.menuActiveName = tab.menuId + "";
                // this.mainTabsActiveName = tab.name;
            }
        },
        //定位当前选中的菜单
        watchRoute() {
            let MenuList = this.menuList;
            let theRouteName = this.$route.name;
            let openFlag = false;
            for (let i = 0; i < MenuList.length; i++) {
                openFlag = false;
                for (let j = 0; j < MenuList[i].list.length; j++) {
                    // console.log(MenuList[i].list[j]);
                    if (
                        MenuList[i].list[j].url.replace("/", "-") ==
                        theRouteName
                    ) {
                        openFlag = true;
                        this.activeName =
                            MenuList[i].list[j].name +
                            "-" +
                            MenuList[i].list[j].type;
                        //填充路径
                        this.ComponentName = MenuList[i].name;
                        this.mainLinks.push(MenuList[i].name);
                        this.mainLinks.push(MenuList[i].list[j].name);
                        break;
                    }
                }
                if (openFlag) {
                    this.openNames = [MenuList[i].name];
                    break;
                }
            }
            this.$nextTick(() => {
                this.$refs.p_menu.updateOpened();
            });
        },
        //菜单路径---------------------------
        parentChangeTag(value) {
            if (value[0] !== undefined) {
                this.ComponentName = value[0];
            }
        },
        childChangeTag(value) {
            let name = value.split("-");
            if (name[1] == "0") {
                this.mainLinks = [name[0]];
            } else {
                this.mainLinks = [this.ComponentName, name[0]];
            }
        }
    }
};
</script>